import React,{useState,useEffect,useMemo,useCallback} from 'react'

const myset = new Set()

function UseCallback(props){
    console.log('start')
    const [qty,setQty] = useState(1)
    const [page,setPage] = useState(1)

    // 传统用法：组件刷新每次都会创建一个新的函数
    // const handle = ()=>{
    //     console.log('传统用法')
    // }

    // 用法一: 默认用法(与传统用法一致)
    // const handle = useCallback(()=>{
    //     console.log('用法一: 默认用法')
    // })

    // 用法二: 指定空依赖(初始化时创建一个函数,组件刷新是得到缓存函数)
    // 注意: 函数被缓存后,注意作用域问题
    // const handle = useCallback(()=>{
    //     console.log('用法二: 指定空依赖',page,qty)
    // },[])


    // 用法三: 指定依赖(初始化和依赖发生改变时创建一个函数,否则得到缓存函数)
    // 注意: 函数被缓存后,注意作用域问题
    const handle = useCallback(()=>{
        console.log('用法三: 指定依赖',page,qty)
    },[page])

    myset.add(handle)
    console.log('myset',myset)
    handle();

    const changeQty = useCallback(function(){
        setQty(qty+1)
    },[qty])
    const changePage = useCallback(()=>{
        setPage(page+1)
    },[page])

    console.log('end')
    return (
        <div>
            <h4>useCallback</h4>
            <button onClick={changeQty}>qty: {qty}</button>
            <button onClick={changePage}>page: {page}</button>
        </div>
    )
}

export default UseCallback;